<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!-- 引入外部header -->
<head th:include="/header.html"/>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">java工具Demo</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="/static/images/img/header.jpg" class="layui-nav-img">
                    管理员
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退出<i class="fa fa-sign-out" aria-hidden="true"></i></a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul id="menu" class="layui-nav layui-nav-tree"></ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="content-body">
            <div id="content-body" class="content-page"></div>
        </div>
    </div>

    <div class="layui-footer" style="background-color: #3c3c3c;color: #c9c2c2">
        <!-- 底部固定区域 -->
        © niuBiKeJi.com - 底部固定区域
    </div>
</div>
<!-- 引入外部页脚 -->
<div th:include="/footer.html"/>
<script>
    var menu = [{
        "title": "播放视频",
        "href": "/player",
        "icon": "fa fa-home",
        "target": "_self",
        "child": []
    },{
        "title": "自写表格",
        "href": "/task/pcTable",
        "icon": "fa fa-home",
        "target": "_self",
        "child": []
    }, {
        "title": "测试",
        "href": "/page/all.html",
        "icon": "fa fa-home",
        "target": "_self",
        "child": []
    }, {
        "title": "按钮",
        "href": "/page/button.html",
        "icon": "fa fa-home",
        "target": "_self",
        "child": []
    }, {
        "title": "轮播图",
        "href": "/page/carousel.html",
        "icon": "fa fa-home",
        "target": "_self",
        "child": []
    }, {
        "title": "代码框",
        "href": "/page/code.html",
        "icon": "fa fa-home",
        "target": "_self",
        "child": []
    }, {
        "title": "颜色选择器",
        "href": "/page/colorpicker.html",
        "icon": "fa fa-home",
        "target": "_self",
        "child": []
    }, {
        "title": "常用元素",
        "href": "/page/element.html",
        "icon": "fa fa-home",
        "target": "_self",
        "child": []
    }, {
        "title": "自定义模块",
        "href": "/page/extend.html",
        "icon": "fa fa-home",
        "target": "_self",
        "child": []
    }, {
        "title": "流加载",
        "href": "/page/flow.html",
        "icon": "fa fa-home",
        "target": "_self",
        "child": []
    }, {
        "title": "表单",
        "href": "/page/form.html",
        "icon": "fa fa-home",
        "target": "_self",
        "child": []
    }, {
        "title": "日期",
        "href": "/page/laydate.html",
        "icon": "fa fa-home",
        "target": "_self",
        "child": []
    }, {
        "title": "富文本编辑器",
        "href": "/page/layedit.html",
        "icon": "fa fa-home",
        "target": "_self",
        "child": []
    }, {
        "title": "弹出层",
        "href": "/page/layer.html",
        "icon": "fa fa-home",
        "target": "_self",
        "child": []
    }, {
        "title": "栅格布局",
        "href": "/page/layout.html",
        "icon": "fa fa-home",
        "target": "_self",
        "child": []
    }, {
        "title": "分页",
        "href": "/page/laypage.html",
        "icon": "fa fa-home",
        "target": "_self",
        "child": []
    }, {
        "title": "评分",
        "href": "/page/rate.html",
        "icon": "fa fa-home",
        "target": "_self",
        "child": []
    }, {
        "title": "滑块",
        "href": "/page/slider.html",
        "icon": "fa fa-home",
        "target": "_self",
        "child": []
    }, {
        "title": "表格",
        "href": "/page/table.html",
        "icon": "fa fa-home",
        "target": "_self",
        "child": []
    }, {
        "title": "穿梭框",
        "href": "/page/transfer.html",
        "icon": "fa fa-home",
        "target": "_self",
        "child": []
    }, {
        "title": "树组件",
        "href": "/page/tree.html",
        "icon": "fa fa-home",
        "target": "_self",
        "child": []
    }, {
        "title": "文件上传",
        "href": "/page/upload.html",
        "icon": "fa fa-home",
        "target": "_self",
        "child": []
    }, {
        "title": "工具集",
        "href": "/page/util.html",
        "icon": "fa fa-home",
        "target": "_self",
        "child": []
    }, {
        "title": "星座",
        "href": "/page/xingzuo.html",
        "icon": "fa fa-home",
        "target": "_self",
        "child": []
    }, {
        "title": "分页11",
        "href": "",
        "icon": "fa fa-home",
        "target": "_self",
        "child": [{
            "title": "主页一",
            "href": "/page/xingzuo.html",
            "icon": "fa fa-tachometer",
            "target": "_self"
        },
        {
            "title": "主页二",
            "href": "/page/test.html",
            "icon": "fa fa-tachometer",
            "target": "_self"
        },
        {
            "title": "主页三",
            "href": "/page/pcTable.html",
            "icon": "fa fa-tachometer",
            "target": "_self"
        }]
    }];

    var layer, $;
    layui.use(['layer', 'jquery'], function () {
        layer = layui.layer;
        $ = layui.jquery;
        let str = createMenu();
        $("#menu").append(str);
        // layer.msg("启动成功");
        // $('#content-body').load("/home");
        $('#content-body').load("/love");
    });

    function onClose(id) {
        let list = id.classList;
        if (list.length == 1) {
            $("#" + id.id).addClass("layui-nav-itemed")
        } else if (list.length == 2) {
            $("#" + id.id).removeClass("layui-nav-itemed")
        }
    }

    // 创建菜单
    function createMenu() {
        let li = "";
        menu.forEach(e => {
            if (e.child.length !== 0) {
                let child = "";
                e.child.forEach(c => {
                    child += "<dd><a href='javascript:;' onclick=jumpPage('" + c.href + "')><i class='" +
                        c.icon + "  tool-icon'></i>" + c.title + "</a></dd>"
                });
                li += "<li id='" + e.title + "' class='layui-nav-item'><a onclick='onClose(" + e.title +
                    ")' href='javascript:;'><i class='" +
                    e.icon + "  tool-icon'></i>" + e.title +
                    "<span class='layui-nav-more'></span></a><dl class='layui-nav-child'>" + child +
                    "</dl></li>";
            } else {
                li += "<li class='layui-nav-item'><a href='javascript:;' onclick=jumpPage('" + e.href +
                    "')><i class='" + e.icon + " tool-icon'></i>" + e.title + "</a></li>";
            }
        });
        return li;
    }

    // 跳转
    function jumpPage(href) {
        $('#content-body').empty(); // 将内容清空
        if (href.indexOf("/page") != -1) {
            $('#content-body').load("/static" + href);
        } else {
            $('#content-body').load(href);
        }
    }
</script>
<style>
    #menu a {
        text-decoration: none;
    }

    #menu a:hover {
        background-color: #1E9FFF;
        text-decoration: none;
    }

    .tool-icon {
        margin-right: 10px;
    }

    .content-body {
        padding: 10px;
        background-color: #ecf0f5;
        width: 100%;
        height: 100%;
        display: flex;
    }

    .content-page {
        display: inline-block;
        padding: 0.625rem;
        background-color: white;
        border-radius: 3px;
        width: 100%;
        box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
        overflow-y: scroll;
    }
</style>
</body>
</html>
